<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->

    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="color.css" />
    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>

    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="sample/sample.nocache.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/modalwin.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>
<div class="panel">
    </div>
    <div class="panel dum">
    <div class="panel-menu">
        <a href="home" class="logo">agcrm</a>
        <a href="home"><img src="images/icon-home.png" /></a>
        <a href="people" class="active top-btn">People</a>
    </div>
        <div class="top-right-btn" style="padding: 9px 10px;"><img src="images/settings.png">
        <ul class="drop-menu" style="margin-left: -115px;">
            <li><a href="profile">Personal Information</a></li>
            <li><a href="changePassword">Change Password</a></li>
<!--             <li><a href="#">Themes</a></li> -->
<!--             <li><a href="#">Help</a></li> -->
        </ul>
        </div>
        <div class="top-right-btn" style="padding: 11px 10px;"><img src="images/plus.png">
        <ul class="drop-menu" style="margin-right: -27px; right: 75px;">
        <shiro:hasRole name="leadAdd">
            <li><a href="newLead">New Lead</a></li>
        </shiro:hasRole>
		<shiro:hasRole name="accountAdd">
            <li><a href="new-account">New Account</a></li>		
        </shiro:hasRole>    
		<shiro:hasRole name="contactAdd">
            <li><a href="new-contact">New Contact</a></li>
        </shiro:hasRole>         
        </ul>
        </div>
        <div class="top-right-btn"><li style="font-weight: bold; margin: 0 15px 0 0;list-style-image: url('images/s_arrow.png'); direction: rtl; ">Basma
        <ul class="drop-menu" style="right: 100px;">
            <li><a href="/sales/s/profile">Test@test.test</a></li>
            <li><a href="/sales/s/profile">View Profile</a></li>
            <li><a href="/sales/s/login">Sign Out</a></li>
        </ul>
        </li>
        </div>
        <div class="top-right-btn" style="padding: 4px 10px;border: 0;">
             <a href="/sales/s/profile"><img src="images/noprofile.jpg" style="height: 30px; width: 30px;"/></a>      
        </div>
         
        <div class="top-right-btn notificationIcon">
        	<div onclick="window.location='pendingRequests'" class="countNotifications toolTip">5
	        	<div class="toolTipContent">Requests</div>
        	</div>
        </div>
        
        <div class="top-right-btn notificationIcon">
        	<div class="countNotifications toolTip" style="background-color: rgb(226, 109, 0);">9
	        	<div class="toolTipContent">Appointments</div>
        	</div>
        </div>
         
        <div class="top-right-btn notificationIcon">
        	<div class="countNotifications toolTip" style="background-color: rgb(134, 168, 0);">7
	        	<div class="toolTipContent">Calls</div>
        	</div>
        </div>

    </div>
    <span class="flip"><img src="images/arrow-up.png"/></span>
    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>


	<div id="flextable">
	
	</div>
        <div class="footer">
        <span>AGCRM &copy; 2012</span>
        <div class="social-networks">
            <a href="#"><img src="images/icon-twitter1.png"/></a>
            <a href="#"><img src="images/icon-facebook1.png"/></a>
            <a href="#"><img src="images/icon-googleplus1.png"/></a>
        </div>
    </div>
  </body>
</html>
